<template>
    <div class="player">
        <audio @timeupdate="timeupdate" ref="musicplayer" autoplay controls loop="loop" :src="`https://music.163.com/song/media/outer/url?id=${musicID}.mp3`"/>
        <!-- 播放器 -->
        <div class="playBar">
            <div class="ar-img">
                <img :src="song.al.picUrl" alt="">
            </div>
            <div class="content" @click="showFull">
                <div class="title">{{song.name}}</div>
                <div class="ar">{{song.ar[0].name}}</div>
            </div>
            <!-- 播放按钮 -->
            <i @click="togglePlay" ref="icon" :class="{'icon': $root.playingMusic.isPlay}">
                <canvas ref="canvas" width="36" height="36"></canvas>
            </i>
            <!-- 列表按钮 -->
            <span @click="showHistory"></span>
            <div class="historyList" v-show="isHistory">
                <h2>历史播放({{$root.playingMusic.playList.length}})</h2>
                <p>最近播放</p>
                <HistoryList v-for="(item,i) in $root.playingMusic.playList" :key="i" :item="item"/>
            </div>
            <div class="back" @click="hideHistory" v-show="isHistory"></div>
        </div>
        <!-- 播放页 -->
        <div class="fullplay" v-show="isFull">
            <div class="bg" :style="{backgroundImage: `url(${song.al.picUrl})`}"></div>
            <div class="song-box">
                <div class="exit" @click="exitFull"></div>
                <div class="song-wrap">
                    <div class="song-disc">
                        <div class="song-turn" ref="turn">
                            <div class="song-img">
                                <img :src="song.al.picUrl" alt="">
                            </div>
                        </div>
                        <!-- <span></span> -->
                    </div>
                </div>
                <!-- 歌词 -->
                <div class="lrc">
                    <h2>{{song.name}} - <span>{{song.ar[0].name}}</span></h2>
                    <div class="lrc-box">
                        <ul class="lrc-scroll" :style="{transform:`translateY(-${index*32}px)`}">
                            <li v-for="(item, i) in lrcList" :key="i" :class="{'current': index==i}">{{item.lyric}}</li>
                        </ul>
                    </div>
                </div>
                <!-- 进度条 -->
                <div class="tiem-warp">
                    <div style="position: relative; height: 2px">
                        <span class="curtime">{{currentTime|formattime}}</span>
                        <div class="progress" ref="progress" @click="progress">
                            <div class="bar" ref="bar"></div>
                            <div class="line" ref="line">
                                <div class="mask"></div>
                            </div>     
                        </div>
                        <span class="dtime">{{durationTime|formattime}}</span>
                    </div>
                </div>
                <!-- 播放页控件 -->
                <div class="controls">
                    <i @click="prev"></i>
                    <i @click="togglePlay" :class="{'play_pause': $root.playingMusic.isPlay}"></i>
                    <i @click="next"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HistoryList from '../components/HistoryList'
export default {
    name: 'Play',
    components: {
        HistoryList
    },
    props: ['musicID'],
    data() {
        return {
            song: {
                name: '未知',
                al: {
                    picUrl: '../assets/disc_default.png'
                },
                ar: [{name: '未知'}]
            },
            isFull: false, // 是否全屏
            lrcList: [], // 歌词列表
            index: 0, // 当前歌词下标
            currentTime: 0, // 当前播放时间
            durationTime: 0, // 总时间
            num: 0, // 点击上一首下一首的计数器
            flag: true, // 节流阀
            isHistory: false // 是否显示历史播放列表
        }
    },
    watch: {
        musicID(id) {
            // this.$refs.icon.className = 'icon';
            this.$root.playingMusic.isPlay = true;
            this.axios.get('/song/detail?ids=' + id).then((response) => {
                // console.log(response);
                if (response.data.code == 200) {
                    this.song = response.data.songs[0];
                }
            })
            this.axios.defaults.baseURL = 'http://music.kele8.cn';
            this.axios.get('/lyric?id=' + id)
            .then((response)=> {
                // console.log(response.data.lrc.lyric);
                let lrc = response.data.lrc.lyric.split(/\n/);
                let reg=/\[(\d+):(\d+\.\d+)\](.+)/;
                this.lrcList = lrc.map((item) => {
                    reg.test(item)
                    return {
                        time: parseInt(RegExp.$1 * 60) + parseFloat(RegExp.$2),
                        lyric: RegExp.$3
                    }
                })
            });
            this.num = this.$root.playingMusic.idList.indexOf(id);
            this.axios.defaults.baseURL = 'http://musicapi.leanapp.cn/';
            return id;
        }
    },
    methods: {
        // 上一首
        prev() {
            if (this.flag) {
                this.flag = false;
                setTimeout(()=> {
                    --this.num;
                    this.num = this.num < 0 ? this.$root.playingMusic.idList.length - 1 : this.num;
                    this.$root.playingMusic.musicID = this.$root.playingMusic.idList[this.num];
                    this.flag = true;
                },200)
            }
        },
        // 下一首
        next() {
            if (this.flag) {
                this.flag = false;
                setTimeout(()=> {
                    ++this.num;
                    this.num = this.num > this.$root.playingMusic.idList.length - 1 ? 0 : this.num;
                    this.$root.playingMusic.musicID = this.$root.playingMusic.idList[this.num];
                    this.flag = true;
                },200)
            }
        },
        // 点击播放暂停按钮切换播放状态和碟片旋转
        togglePlay() {
            if (this.$root.playingMusic.isPlay) {
                this.$refs.musicplayer.pause();
                this.$refs.turn.style.animationPlayState="paused";
                this.$root.playingMusic.isPlay = false; // 播放状态
            } else {
                this.$refs.musicplayer.play();
                this.$refs.turn.style.animationPlayState="running";
                this.$root.playingMusic.isPlay = true;
            }
        },
        // 播放位置发生改变
        timeupdate(e) {
            let audio = e.target;
            // audio.addEventListener('canplay', ()=> {
                let currentTime = audio.currentTime;
                let durationTime = audio.duration;
                this.currentTime = audio.currentTime;
                this.durationTime = audio.duration;
                for (var i in this.lrcList) {
                    let lrcTime = this.lrcList[i].time;
                    // console.log(lrcTime);
                    let i2 = parseInt(i) + 1;
                    if ( !this.lrcList[i2] || (currentTime >= lrcTime && currentTime < this.lrcList[i2].time )) {
                        this.index = i;
                        break;
                    }
                }
                this.drawCircle(currentTime, durationTime);
                let percentage = currentTime / durationTime * 100 + '%';
                this.$refs.line.style.width = percentage;
            // })
        },
        // 播放按钮画布
        drawCircle(c, d) {
            let canvas = this.$refs.canvas;
            let ctx = canvas.getContext('2d');
            // ctx.width = ctx.width * 4;
            // ctx.height = ctx.height * 4;
            ctx.beginPath();
            ctx.strokeStyle = '#aaa';
            ctx.arc(18,18,16,0,Math.PI * 2+0.5);
            ctx.lineWidth = 1;
            // ctx.scale(6,6)
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.strokeStyle = '#dd001b';
            ctx.arc(18,18,16,0,Math.PI * 2 * (c/d)+0.5);
            ctx.lineWidth = 1;
            // ctx.scale(6,6);
            ctx.stroke();
            ctx.closePath();
            // ctx.scale(-6,-6)
            // ctx.width = 36 / 6;
            // ctx.height = 36 / 6;
        },
        // 点击播放页全屏
        showFull() {
            this.isFull = true;
        },
        // 点击退出全屏
        exitFull() {
            this.isFull = false;       
        },
        // 点击.progress以后,显示对应宽度的.line以及设置计算出来的当前时间
        progress(e) {
            let progressWidth = this.$refs.progress.offsetWidth;
            let progressX = e.offsetX; 
            let nowCurrentTime = progressX * this.durationTime / progressWidth;
            this.$refs.musicplayer.currentTime = nowCurrentTime;
            let percentage = nowCurrentTime / this.durationTime * 100 + '%';
            this.$refs.line.style.width = percentage;
        },
        // 显示历史播放列表
        showHistory() {
            this.isHistory = !this.isHistory;
        },
        // 隐藏历史播放列表
        hideHistory() {
            this.isHistory = false;
        }
    },
    filters: {
        // 根据秒数格式化成分钟和秒
        formattime(seconds) {
            let m = Math.floor(seconds / 60 % 60);
            m = m < 10 ? '0' + m : m;
            let s = Math.floor(seconds % 60);
            s = s < 10 ? '0' + s : s;
            return m + ':' + s;
        }
    }
}
</script>

<style lang="less" scoped>
.player {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    audio {
        width: 100%;
        height: 40px;
        outline: none;
        display: none;
    }
    .playBar {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        background-color: #fff;
        .ar-img {
            width: 40px;
            height: 40px;
            margin: 0 7px;
            border-radius: 50%;
            overflow: hidden;
            background: url(../assets/disc_default.png) no-repeat;
            background-size: contain;
            img {
                width: 100%;
                display: block;
            }
        }
        .content {
            flex: 1;
            text-align: left;
            .title {
                font-size: 14px;
            }
            .ar {
                font-size: 12px;
                color: #aaa;
            }
        }
        i {
            display: block;
            width: 36px;
            height: 36px;
            margin-right: 10px;
            // background: url(../assets/pause.png) no-repeat;
            background-image: url(../assets/play.png);
            background-size: 20px 20px;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .icon {
            background-image: url(../assets/pause3.png);
        }
        span {
            display: block;
            width: 30px;
            height: 30px;
            background: url(../assets/playlist.png) no-repeat;
            background-size: 30px 30px;
            background-position: center;
            margin-right: 7px;
        }
        .historyList {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            width: 90vw;
            height: 70vh;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 30px;
            padding: 20px 15px 0;
            text-align: left;
            overflow-y: auto;
            z-index: 999;
            h2 {
                font-size: 20px;
                color: #333;
                font-weight: 700;
                margin-bottom: 10px;
            }
            p {
                font-size: 16px;
                color: #999;
            }
        }
        .back {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,.5);
        }
    }
    .fullplay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        min-width: 320px;
        overflow: hidden;
        .bg {
            width: 100%;
            height: 100%;
            background: #161824 url(../assets/disc_default.png) no-repeat;
            background-position: 50%;
            background-color: #161824;
            background-size: auto 100%;
            opacity: 1;
            transform: scale(1.5);
            filter: blur(30px);
            transform-origin: center center;
            overflow: hidden;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                background-color: rgba(0,0,0,.5);
            }
        }
        .song-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            z-index: 21;
            .song-wrap {
                padding-top: 70px;
                .song-disc {
                    position: relative;
                    width: 296px;
                    height: 296px;
                    margin: auto;
                    .song-turn {
                        width: 100%;
                        height: 100%;
                        background: url(../assets/heijiao.png) no-repeat;
                        background-size: contain;
                        border-radius: 50%;
                        overflow: hidden;
                        animation: rollimg 10s linear infinite;
                        .song-img {
                            width: 184px;
                            height: 184px; 
                            margin: 55px auto;
                            border-radius: 50%;
                            overflow: hidden;
                            background: url(../assets/disc_default.png) no-repeat;
                            background-size: contain;
                            img {
                                width: 100%;
                                display: block;
                            }
                        }
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        top: -70px;
                        left: 133px;
                        width: 96px;
                        height: 137px;
                        background-image: url(../assets/needle-ip6.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                    span {
                        display: block;
                        width: 56px;
                        height: 56px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                        background: url(../assets/playbtn.png) no-repeat;
                        background-size: contain;
                    }
                }
            }
            .lrc {
                margin-top: 25px;
                height: 100px;
                h2 {
                    color: #fff;
                    font-size: 18px;
                    span {
                        font-size: 16px;
                        color: hsla(0,0%,100%,.6);
                    }
                }
                .lrc-box {
                    overflow: hidden;
                    margin-top: 14px;
                    height: 50px;
                    .lrc-scroll {
                        transition: all .2s;
                        li {
                            line-height: 24px;
                            padding-bottom: 8px;
                            // margin-bottom: 5px;
                            color: hsla(0,0%,100%,.6);
                            -webkit-mask:-webkit-linear-gradient(top,#000,#000 0%,rgba(0,0,0,0));
                        }
                        .current {
                            color: #fff;
                            -webkit-mask: none;
                        }
                    }
                }
            }
            .tiem-warp {
                width: 100%;
                padding: 35px 70px;
                box-sizing: border-box;
                .progress {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 2px;
                    background-color: #ddd;
                    .line {
                        position: relative;
                        width: 0px;
                        height: 100%;
                        background-color: #d43c33;
                        .mask {
                            position: absolute;
                            right: -10px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 10px;
                            height: 10px;
                            background-color: #fff;
                            border-radius: 50%;
                        }
                    }
                    .bar {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
                span {
                    position: absolute;
                    width: 30px;
                    font-size: 12px;
                    color: #fff;
                    top: 50%;
                    transform: translateY(-50%);
                    &:nth-child(1) {
                        left: -40px;
                    }
                }
                .dtime {
                    right: -40px;
                }
            }
            .controls {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 50px;
                i {
                    display: block;
                    margin: 0 20px;
                }
                i:nth-child(1) {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    background: url(../assets/play_prev.png) no-repeat;
                    background-size: 100%;
                }
                i:nth-child(2) {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    overflow: hidden;
                    background: url(../assets/play_play.png) no-repeat;
                    background-size: 100%;
                }
                i:nth-child(3) {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    background: url(../assets/play_next.png) no-repeat;
                    background-size: 100%;
                }
            }
            .play_pause {
                background-image: url(../assets/play_pause.png) !important;
            }
            .exit {
                position: absolute;
                left: 0;
                top: 0;
                width: 30px;
                height: 30px;
                color: #fff;
                font-size: 20px;
                line-height: 30px;
                text-align: center;
                background: url(../assets/exit.png) no-repeat;
                background-size: contain;
                margin-left: 10px;
                margin-top: 10px;
            }
        }
    }
}
@keyframes rollimg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
